<template>
  <section>
    <img :src="topImg" class="top_img">
    <div class="basic_info">
      <div class="basic_part">
        <span>手机号</span>
        <span>{{phone}}</span>
      </div>
    </div>

    <div class="basic_info" style="margin-top: .4rem">
      <div class="basic_part" style="border-bottom: 1px solid #f2f2f2">
        <span>运营商</span>
        <span :class="{y_match:yMatch2,n_match:nMatch2}">{{operators}}</span>
      </div>
      <div class="basic_part">
        <span>查询结果</span>
        <span :class="{y_match:yMatch,n_match:nMatch}">{{result}}</span>
      </div>
    </div>

  </section>
</template>

<script>
  export default {
    name: "mobileEnterResult",
    data(){
      return{
        result:'',
        topImg:require('../../assets/api/result_success.png'),
        yMatch:true,
        nMatch:false,
        yMatch2:true,
        nMatch2:false,
        phone:'',
        operators:'',
      }
    },
    created(){
      const that = this;
      this.$ajax.post(window.g.apiUrl+'/user/isLog.do')
        .then((response)=>{
          if(response.data.code != 200){
            this.$dialog.notify({
              mes: '登录失效，正在跳转至登录页面',
              timeout: 1500,
              callback:()=>{
                that.$router.push('/login');
              }
            });
          }
        }).catch(()=>{
      })
      let TO_OBJECT = JSON.parse(sessionStorage.getItem('TO_OBJECT'));

      this.phone = TO_OBJECT.phone;
      if(TO_OBJECT.message == '请求成功'){
        this.operators = TO_OBJECT.isp;
        this.result = TO_OBJECT.OUTPUT1.indexOf('+') != -1? '在网时长大于'+TO_OBJECT.OUTPUT1.substr(0,TO_OBJECT.OUTPUT1.indexOf(','))+'个月':'在网时长'+TO_OBJECT.OUTPUT1.replace(',','~')+'个月';
      }else{
        this.operators = '未知';
        this.result = TO_OBJECT.message;
        this.yMatch = false;
        this.nMatch = true;
        this.yMatch2 = false;
        this.nMatch2 = true;
        this.topImg = require('../../assets/api/result_error.png')
      }


    }
  }
</script>

<style scoped>
  .top_img{
    width: 100%;
    height: 4.2rem;
    display: block;
  }
  .basic_info{
    box-shadow: 2px 2px 10px rgba(128,128,128,.2);
    width: 100%;
    padding: 0 .4rem;
  }
  .basic_part{
    display: flex;
    padding: .21rem 0;
    align-items: center;
  }
  .basic_part span:nth-child(1){
    width: 2rem;
    text-align: left;
  }

  .y_match{
    color: #06D85F;
  }
  .n_match{
    color: red;
  }


</style>
